<template>
  <div>
    <!--工具类-->

    <Row  >
      <i-col span="24" class-name="y_query_right">
          <Input v-model.trim="searchParams.orderSerialNumber" placeholder="请输入订单流水号" clearable
                 class="y_condition"></Input>
          <Select v-model="searchParams.state" placeholder="请选择处理状态"  class="y_condition" clearable style="text-align: left;">
            <Option :value="1" :key="1">待执行</Option>
            <Option :value="2" :key="2">已退款</Option>
            <Option :value="3" :key="3">已驳回</Option>
          </Select>
          <Button type="primary" class="y_condition" icon="ios-search" @click="search">查询
          </Button>

      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border :columns="tableTitles" :data="shortageRefundList" class="table_css"-->
<!--           no-data-text="暂无数据" ></Table>-->

    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="shortageRefundList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in shortageRefundList">
        <div style="width:100%;padding: 0 0.5rem;">
          <Row type="flex" justify="space-between" align="middle">
            <i-col :xs="24" :sm="20" style="text-align: left;padding-left: 1rem;" >
              <div style="margin: 0.25rem">
                <KeyValueView>#{{index+1}}</KeyValueView>
                <KeyValueView title="订单号">{{item.serialNumber}}</KeyValueView>
                <KeyValueView title="退款总金额">${{item.refundPayment}}</KeyValueView>
              </div>

              <div style="margin: 0.25rem">
                <KeyValueView title="含产品">${{item.productRefund}}</KeyValueView>
                <KeyValueView title="含运费">${{item.postageRefund}}</KeyValueView>
<!--                <KeyValueView title="退款订单项数量">{{item.itemCount}}</KeyValueView>-->
                <KeyValueView title="产品件数" >{{item.productCount}}</KeyValueView>
              </div>

              <div style="margin: 0.25rem">
                <KeyValueView title="状态">{{getStateName(item.state)}}</KeyValueView>
                <KeyValueView title="退款类型" >{{getType(item.type)}}</KeyValueView>
                <KeyValueView title="提交时间" >{{$tiyBJTime(item.createtime)}}</KeyValueView>
              </div>

            </i-col>
            <i-col :xs="24" :sm="4" align="right">
              <Button v-has=tRole.ORDER_4_201 ghost size="small" type="info" @click="handleRefundShow(index,false)" style="margin-left:0.5rem;margin-top: 0.3rem;" >查看</Button>
              <Button v-has=tRole.ORDER_4_202 ghost size="small" type="info" @click="handleRefundShow(index,true)" style="margin-left:0.5rem;margin-top: 0.3rem;" :disabled="item.state!=1">处理</Button>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator/>
    </div>

    <Modal v-model="status.modalChangeState.isShow" title="处理退款"  :styles="{top: '20px',bottom:'20px',width:'60%'}">
      <div>
        <Card>
          <Row>
            <i-col span="24" ><span class="key">订单号 :</span>{{shortageRefund.serialNumber}}</i-col>
          </Row>
          <Row style="margin-top: 1em">
            <i-col span="8" v-has=tRole.ORDER_1_206><span class="key">退款总金额 :</span>
              ${{shortageRefund.refundPayment}}
            </i-col>
            <i-col span="8" v-if="shortageRefund.type!=3"><span class="key">退款产品金额 :</span>
              ${{shortageRefund.productRefund}}
            </i-col>
            <i-col span="8"><span class="key">退款运费金额 :</span>
              $ {{shortageRefund.postageRefund}}
            </i-col>
          </Row>
          <Row style="margin-top: 1em" v-if="shortageRefund.type!=3">
            <i-col span="8"><span class="key">退款订单项数量 :</span>
              {{shortageRefund.itemCount}}
            </i-col>
            <i-col span="8"><span class="key">退款产品总数 :</span>
              {{shortageRefund.productCount}}
            </i-col>
          </Row>
          <Row style="margin-top: 1em">
            <i-col span="8"><span class="key">下单用户 :</span>
              {{shortageRefundDetail.order.userName}}
            </i-col>
            <i-col span="8"><span class="key">支付时间 :</span>
              {{shortageRefundDetail.order.checkoutTimeStr}}
            </i-col>
          </Row>
          <Row style="margin-top: 1em">
            <i-col span="24"><span class="key">退款原因 :</span>
              {{shortageRefund.note}}
            </i-col>
          </Row>
          <div style="margin-top: 1em;width: 100%;" v-if="shortageRefund.type!=3">
<!--            <i-col span="24">-->
<!--              <Table :ref="'product' + shortageRefundDetail.order.id" stripe border-->
<!--                     :columns="tableProductTitles" :data="shortageRefundDetail.orderItems" class="table_css"-->
<!--                     no-data-text="暂无数据" style="margin:0;"></Table>-->
<!--            </i-col>-->
            <List style="border-top: 1px solid #e8eaec;margin-top: 1rem;">
              <list-item class="list_item" v-for="(item,index) in shortageRefundDetail.orderItems">
                <div style="width:100%;padding: 0 0.5rem;"  >
                  <Row type="flex" justify="space-between" align="middle">
                    <i-col  :xs="6" :sm="2" style="text-align: left">
                      <img :src="getProductZipImage(item)"
                           style="width:99%;max-width:80px;max-height:80px;"
                           @click="status.modalImage.url=yunPath+item.originalImagePath;status.modalImage.isShow = true;"/>
                    </i-col>
                    <i-col :xs="18" :sm="22" style="text-align: left;padding-left: 1rem;" >
                      <KeyValueView>#{{index+1}}</KeyValueView>
                      <KeyValueView title="SKU">{{item.productCode}}</KeyValueView>
                      <KeyValueView title="价格">${{item.actualPrice}}</KeyValueView>
                      <KeyValueView title="购买数量">{{item.amount}}</KeyValueView>
                      <KeyValueView title="尺寸">{{item.sizeName}}</KeyValueView>
                      <KeyValueView title="重量">{{item.weight}}g</KeyValueView>

                      <KeyValueView oneline title="产品名">{{item.productName}}</KeyValueView>
                    </i-col>
                  </Row>
                </div>
              </list-item>
            </List>
          </div>
        </Card>
      </div>
      <div slot="footer">
        <div v-show="status.modalChangeState.isOnlyShow && shortageRefund.state == 4">
          <Button type="primary" @click="handleRefund(1)" v-has="tRole.ORDER_4_205">撤回优惠券</Button>
        </div>
        <div v-show="!status.modalChangeState.isOnlyShow">
          <Button type="primary" @click="handleRefund(4)" v-has="tRole.ORDER_4_205">已退优惠券</Button>
          <Button type="warning" @click="showRefundPostage()" v-show="shortageRefund.type!=3" v-has="tRole.ORDER_4_203">计算运费</Button>
          <Button type="primary" @click="handleRefund(2)" v-has="tRole.ORDER_4_203">退款</Button>
          <Button type="info" @click="handleRefund(3)"  v-has="tRole.ORDER_4_204">驳回</Button>
        </div>
      </div>
    </Modal>

    <!-- 计算退运费 -->
    <Modal v-model="status.modalRefundPostage.isShow" title="退运费" @on-ok="saveRefundPostage()" ok-text="保存"
           :closable="false" :mask-closable="false">
      <Form :label-width="130" class="modal_newuser_form">
            <FormItem label="返退运费金额($) : " prop="refundPostage" >
              <InputNumber v-model="tData.refundPostage" class="modal_form_input" ></InputNumber>
            </FormItem>
      </Form>
    </Modal>

    <!--查看图片弹出框-->
    <Modal
      v-model="status.modalImage.isShow"
      title=""
      :styles="{align:'center'}">
      <!--:scrollable=true -->

      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 300px"/></div>
    </Modal>
  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/shortageRefund/refund_data"
  import {
    init,
    webList,
    shortageRefundDetail,
    webChangeRefundState,
      countRefundPostage,
      saveRefundPostage
  } from "./js/shortageRefund/refund_funs"
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    components: {ICol,KeyValueView},
        data(){
          return {
            tRole:{//权限
              ORDER_4_203:"ORDER-4-203",//表格-弹窗-退款申请处理-退款
              ORDER_4_204:"ORDER-4-204", //表格-弹窗-退款申请处理-驳回
              ORDER_4_205:"ORDER-4-205", //表格-弹窗-退款申请处理-发放/撤回优惠券
              ORDER_4_201:"ORDER-4-201",//查看
              ORDER_4_202:"ORDER-4-202",//处理
            },
            tPage: tiyData.tPage,
            status: tiyData.tStatus,
            //搜索条件
            searchParams: tiyData.tParams.searchParams,
            changeStateParams: tiyData.tParams.changeStateParams,
            tData: tiyData.tData,
            rules: tiyData.tStatus.rules,
            tableTitles: tiyData.tableTitles(this),
            tableProductTitles: tiyData.tableProductTitles(this),
            shortageRefundList:tiyData.tData.shortageRefundList,
            shortageRefund:tiyData.tData.shortageRefund,
            shortageRefundDetail:tiyData.tData.shortageRefundDetail,
            isShowDetail:false,
            yunPath: this.$store.getters.imgPrefix,
      }
    },
    computed : {},
    methods: {
      getType(type){
        let str="";
        switch (type) {
          case 1 :
            str = "部分退款";
            break;
          case 2 :
            str = "整单退款";
            break;
          case 3 :
            str = "退运费";
            break;
          default:
            str = "no";
        }
        return str;
      },
      getStateName(state){
        let str = "待执行";
        switch (state) {
          case 1 :
            str = "待执行";
            break;
          case 2 :
            str = "已退款";
            break;
          case 3 :
            str = "已驳回";
            break;
          case 4 :
            str = "优惠券形式退款";
            break;
          default:
            str = "待执行";
        }
        return str;
      },
      getProductZipImage(product){
        let imageUrl = this.yunPath+product.originalImagePath;
        let self=this;
        if(product!=null&&product.zipImages!=null){
          imageUrl=this.yunPath+product.zipImages[0].imagePath
          }
        return !imageUrl ? '' : imageUrl;
      },
      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      handleRefundShow(index, isHandle){
        tiyData.tStatus.modalChangeState.isOnlyShow = !isHandle;
        shortageRefundDetail(this, tiyData, index);
      },
      handleRefund(state){
        let shortageRefund = tiyData.tData.shortageRefund;
        tiyData.tParams.changeStateParams.refundId = shortageRefund.id;
        tiyData.tParams.changeStateParams.state = state;
        tiyData.tParams.changeStateParams.serialNumber = shortageRefund.serialNumber;
        let msg ="";
        switch(state){
            case 1:
                msg = "请确认已经在优惠券管理中收回发放的优惠券！此操作后可以重新对缺货退款作处理。";
                this.$Modal.confirm({
                    title: '确认',
                    content: msg,
                    onOk: () => {
                        webChangeRefundState(this, tiyData);
                    }
                });
                break;
            case 2:
                msg = "请确认已经设置返退运费！是否执行退款？退款总金额" + shortageRefund.refundPayment + "，其中产品金额 : $"
                    + shortageRefund.productRefund + ",  运费金额 : $" + shortageRefund.postageRefund + "。";
                this.$Modal.confirm({
                    title: '退款确认',
                    content: msg,
                    onOk: () => {
                        webChangeRefundState(this, tiyData);
                    }
                });
                break;
            case 3:
                webChangeRefundState(this, tiyData);
                break;
            case 4:
                msg = "请确认已经以发放优惠券方式进行退款。如果当前订单有多笔缺货退款时，需人工核算返退运费！";
                this.$Modal.confirm({
                    title: '确认',
                    content: msg,
                    onOk: () => {
                        webChangeRefundState(this, tiyData);
                    }
                });
                break;
            default:
                break;
        }
      },
      showRefundPostage(index) {
          countRefundPostage(this, tiyData);
      },
        saveRefundPostage(){
            this.$Modal.confirm({
                content: "是否将返退运费修改为：" + tiyData.tData.refundPostage,
                onOk: () => {
                    saveRefundPostage(this, tiyData);
                }
            });
        }
    },
    mounted(){
      init(this, tiyData);
      // webList(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_form {
    padding: 1rem 2rem;
  }

  .modal_form_input {
    width: 180px;
    margin-right: 10px;

  }

  .tiy_key{
    min-width: 120px;
  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
